<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		.ok{
			color:yellow;
		}
		.error{
			color:red;
		}
	</style>
</head>
<body>
	 名字： <input type="text" id="name" onblur="checkName()" />
	     <span id="nameMsg">5-10位字母、数字、下划线</span>
	     <span id="nameExistMsg"></span>
	     <br/>
	        邮箱： <input type="text" id="email" onblur="checkEmail()" />
	     <span id="emailMsg">必须符合邮箱的格式</span>
	
<script src="${pageContext.request.contextPath}/lib/jquery/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		function checkName(){
			var name = $("#name").val();
			console.log(name);
			var nameMsgSpan = $("#nameMsg");
			var reg = /^\w{5,20}$/;
			console.log(name.match(reg));
			if(name.match(reg)){
				nameMsgSpan.removeClass("error");
				nameMsgSpan.addClass("ok");
			} else {
				nameMsgSpan.removeClass("ok");
				nameMsgSpan.addClass("error");
				$("#nameExistMsg").html("");
				return;
			}
			$.post("${pageContext.request.contextPath}/ajax2",
					{"name":name},
					function(data){
						if(data.isExist){
							$("#nameExistMsg").html("该用户名已存在");
							$("#nameExistMsg").css("color","red");						
						} else {
							$("#nameExistMsg").html("该用户名符合要求");
							$("#nameExistMsg").css("color","red");
						}
					},
					"json")
		}
	</script>
</body>
</html>